<template>
	<div>
		<ul class="input_list">
			<li>姓名：<a-input v-model:value="userinfo.username" /></li>
			<li>年龄：<a-input v-model:value="userinfo.age" /></li>
			<li>
				性别：
				<a-radio-group v-model:value="userinfo.sex">
					<a-radio value="男">男</a-radio>
					<a-radio value="女">女</a-radio>
				</a-radio-group>
			</li>
			<li>
				爱好：
				<span v-for="(item, index) in userinfo.hobby" :key="index">
					<a-checkbox v-model:checked="item.checked"> {{ item.label }} </a-checkbox>
				</span>
			</li>
			<li>
				城市：
				<a-select v-model:value="userinfo.selectedCity" style="width: 200px" placeholder="选择城市">
					<a-select-option v-for="(item,index) in userinfo.citys" :key="index" :value="item">
						{{item}}
					</a-select-option>
				</a-select>
			</li>
			<li>
				生日：
				<a-date-picker v-model:value="userinfo.birthday" style="width:200px" @change="pickerChange" />
			</li>

			<li>
				日期演示：
				<a-date-picker v-model:value="userinfo.day" style="width:200px" />
			</li>
		</ul>

		{{ userinfo }}
	</div>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	import moment from 'moment';
	const dateFormat = 'YYYY-MM-DD';
	export default defineComponent({
		data() {
			return {
				userinfo: {
					username: "",
					age: "",
					sex: "女",
					hobby: [
						{ label: "吃饭", checked: true },
						{ label: "睡觉", checked: true },
						{ label: "写代码", checked: false },
					],
					citys: ["北京", "深圳", "上海"],
					selectedCity: "深圳",
					birthday: "",
					day: moment('2012-12-11', dateFormat)
				},
			};
		},
		methods: {
			pickerChange(e : any) {
				// console.log(e._d)
				var oDate = new Date(e._d)
				console.log(oDate.getTime())
			}
		}

	});
</script>

<style lang="scss">
	ul {
		list-style: none;
	}

	.input_list {
		padding: 10px;

		li {
			margin-bottom: 15px;

			&>input {
				width: 400px !important;
			}
		}
	}
</style>